<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../Ajs/vue.min.js"></script>

</head>
<body>
<div id="app">
    方式一：传递data的值
    <div :style="{width:myWid,height:myHei,backgroundColor:backColor}">123</div>

    方式二：传递data的对象
    <div :style="objStyle"></div>

    方式三：传递data的对象组成数组
    <div :style="[objStyle,objStyle1]"></div>

</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            myWid:"100px",
            myHei:"100px",
            backColor:"red",

            objStyle:{
                border:"1px solid #000",
                height:'200px',
                width:'100px'
            },
            objStyle1:{
                backgroundColor:"red",
                borderRadius:"5px"
            }
        },
        methods:{}
    })

    // 【样式style绑定】
    /*
    style样式绑定 实现的是内联样式

    * */





</script>
</body>
</html>
